<template>
  <!-- app-container home -->
  <div class="app-container">
    <el-row  style="height: 150px;background-color:#ffffff;margin-bottom:10px;border-radius:5px" v-hasPermi="['business:dashboard:projecttotal']">
       <el-col :span="24">
        <el-row style="height:40px;line-height:40px;margin-left:20px">
          <el-col :span="24"><div style="border-left: 3px solid #409EFF;margin-top:5px;padding-left:10px">项目概览</div></el-col>
        </el-row>
       <el-row>
        <el-col :span="6">
          <table style=" margin:20px 30px">
            <tr>
               <td rowspan="2" style="background:rgb(64, 158, 255,0.3);width:60px; height:60px;">
                  <i class="el-icon-s-cooperation" style="margin-left: 15px;font-size:30px;color:rgb(64, 158, 255)"></i>
               </td>
               <td>总项目数</td> 
            </tr>
            <tr> 
              <td>{{ projectObj.total }}</td> 
            </tr>
          </table>

       </el-col>
       
       <el-col :span="6">
        <table style=" margin:20px 30px">
          <tr>
             <td rowspan="2" style="background:rgb(128, 183, 238,0.3);width:60px; height:60px;">
                <i class="el-icon-refresh" style="margin-left: 15px;font-size:30px;color:rgb(128, 183, 238)"></i>
             </td>
             <td>进行中</td> 
          </tr>
          <tr> 
            <td>{{projectObj.unDoneNum}}</td> 
          </tr>
        </table>
       </el-col>
       <el-col :span="6">
        <table style=" margin:20px 30px">
          <tr>
             <td rowspan="2" style="background:rgb(255, 115, 64,0.3);width:60px; height:60px;">
                <i class="el-icon-close-notification" style="margin-left: 15px;font-size:30px;color:rgb(255, 115, 64)"></i>
             </td>
             <td>已延期</td> 
          </tr>
          <tr> 
            <td>{{projectObj.overdueNum}}</td> 
          </tr>
        </table>
       </el-col>
       <el-col :span="6">
        <table style=" margin:20px 30px">
          <tr>
             <td rowspan="2" style="background:rgb(19, 241, 34,0.3);width:60px; height:60px;">
                <i class="el-icon-switch-button" style="margin-left: 15px;font-size:30px;color:rgb(19, 241, 34)"></i>
             </td>
             <td>已关闭</td> 
          </tr>
          <tr> 
            <td>{{projectObj.doneNum}}</td> 
          </tr>
        </table>
       </el-col>

       </el-row>
       </el-col>
        
    </el-row>
    <el-row :gutter="3" v-hasPermi="['business:dashboard:projecttotal']">
      <el-col :span="8">
         <el-row :gutter="3">
            <el-col :span="12">
                <div class="total_card_num" @click="handleTaskList(1)"> 
                  <el-row>
                    <el-col :span="24" class="card_item_title">总任务</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24" class="card_item_num" style="color: #409EFF;">{{ taskObj.total }}</el-col>
                  </el-row>
                  <el-row >
                    <el-col :span="24" class="card_num_bottom" style="background-color: #409EFF;"></el-col>
                  </el-row>
                </div> 
            </el-col>
            <el-col :span="12">
              <el-row >
                <el-col :span="24">
                  <div class="total_card_num" @click="handleTaskList(2)"> 
                    <el-row>
                      <el-col :span="24" class="card_item_title">进行中</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24" class="card_item_num" style="color: #84e3fa;">{{ taskObj.unDoneNum }}</el-col>
                    </el-row>
                    <el-row >
                      <el-col :span="24" class="card_num_bottom" style="background-color: #84e3fa;"></el-col>
                    </el-row>
                  </div> 
                </el-col>
              </el-row>
            </el-col>
         </el-row>
         <el-row :gutter="3">
          <el-col :span="12">
            <el-row >
              <el-col :span="24">
                <div class="total_card_num" @click="handleTaskList(3)"> 
                  <el-row>
                    <el-col :span="24" class="card_item_title">超期</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24" class="card_item_num" style="color: #f4a30b;">{{ taskObj.overdueNum }}</el-col>
                  </el-row>
                  <el-row >
                    <el-col :span="24" class="card_num_bottom" style="background-color: #f4a30b;"></el-col>
                  </el-row>
                </div> 
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row >
              <el-col :span="24">
                <div class="total_card_num" @click="handleTaskList(4)"> 
                  <el-row>
                    <el-col :span="24" class="card_item_title">已完成</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24" class="card_item_num" style="color: #0df268;">{{ taskObj.doneNum }}</el-col>
                  </el-row>
                  <el-row >
                    <el-col :span="24" class="card_num_bottom" style="background-color: #0df268;"></el-col>
                  </el-row>
                </div> 
              </el-col>
            </el-row>
          </el-col>
       </el-row>
      </el-col>
      <el-col :span="16">
        <el-card shadow="never" style="height:265px">
          <el-table border v-loading="loading" :data="taskList"  :border="false"  header-cell-class-name="table_header_row">
            <el-table-column label="项目编码" align="left" width="150"   prop="projectNo">
              <!-- <template slot-scope="scope">
                <a style="color: cornflowerblue;" @click="openViewDetail(scope.row)">{{ scope.row.projectNo }}</a>
              </template> -->
            </el-table-column>
            <el-table-column label="项目名称" align="center" width="150" prop="projectName" /> 
            <el-table-column label="任务名称" align="center"  prop="nodeName" /> 
              
          </el-table>
          <pagination v-show="total > 0" :total="total" :page-sizes="[3]" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="handleTaskList" />
        </el-card>
      </el-col>
      
    </el-row>




  <!-- <h1>欢迎来到首页</h1> -->
    <el-container style="height: 450px;background-color:#ffffff" v-hasPermi="['business:dashboard:projecttotal']">
      <el-main>
        <!-- 项目统计组件 -->
        <ProjectStatistics></ProjectStatistics>
      </el-main>
    </el-container>
    <el-container style="height: 460px;background-color:#ffffff;margin-top: 10px;" v-hasPermi="['business:dashboard:projecttotal']">
      <el-main style="margin-top: 10px;">
        <!-- 测试统计组件 -->
        <TestStatistics></TestStatistics>
      </el-main>
    </el-container>

    <el-container style="height: 330px;background-color:#ffffff;margin-top: 10px;" v-hasPermi="['business:dashboard:projecttotal']">
      <el-main style="margin-top: 10px;">
        <!-- 个人数据统计 -->
        <OwnStatistics></OwnStatistics>
      </el-main>
    </el-container>


    <el-container style="height: 330px;background-color:#ffffff;margin-top: 10px;" v-hasPermi="['business:dashboard:supplier']">
      <el-main style="margin-top: 10px;">
        <!-- 供应商数据统计 -->
        <OwnStatisticsGys></OwnStatisticsGys>
      </el-main>
    </el-container>
       </div>
</template>

<script>
import ProjectStatistics from "@/components/home/ProjectStatistics";
import TestStatistics from "@/components/home/TestStatistics";
import OwnStatistics from "@/components/home/OwnStatistics";
import OwnStatisticsGys from "@/components/home/OwnStatisticsGys";
import {totalTaskForUser,getTaskList}  from "@/api/projectManage/task";
import {totalProjectForUser}  from "@/api/projectManage/projectList";
export default {
  name: "Index",
  components: { ProjectStatistics, TestStatistics, OwnStatistics,OwnStatisticsGys },
  data() {
    return {
      // 版本号
      version: "3.8.7",
      taskList:[],
      projectObj:{},
      taskObj:{},
      loading:false,
      total:0,
      queryParams:{
        pageNum:1,
        pageSize:3,
        userFlag:1
      }
    };
  },
  created() {
    let roles = this.$store.getters.roles
    if (Array.from(roles).length !== 0) {
      roles.forEach(item => {
        if (item === this.$store.state.globalParam.VISCODE) {
          this.openTip()
        }
      })
    };
    this.handleTotalTaskForUser();
    this.handleTotalProjectForUser();
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    openTip() {
      this.$notify.info({
        title: '提示',
        message: '你当前是以游客的身份登录'
      });
    },
    handleTotalTaskForUser(){
      totalTaskForUser('1').then(response=>{
        this.taskObj = response.data;
      })
    },

    handleTotalProjectForUser(){
      totalProjectForUser('1').then(response=>{
        this.projectObj = response.data;
      })
    },

    handleTaskList(flag){
      this.queryParams.temp=flag; 
      this.loading = true;
      getTaskList(this.queryParams).then(response => {
        this.taskList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
}

.el-header,
.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
::v-deep .table_header_row{
  background-color:#ffffff !important;

}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  // background-color: #E9EEF3;
  // color: #333;
  text-align: center;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.app-container {
  padding: 10px 10px;
  background-color: #eee;
}


.total_card_num{
  height: 130px;
  border-radius: 15px;
  margin-bottom: 5px;
  background-color: #ffffff;
  width: 100%;
  text-align: center;
  cursor: pointer;
}

.card_num_bottom{
  margin-top:38px;
  width:100%;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  height: 12px;

}

         
.card_item_title{
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
}

.card_item_num{
  margin-top: 30px;
}

</style>

